<nz-tabset [nzTabBarExtraContent]="extraTemplate">
  <nz-tab nzTitle="透传详情">

    <nz-list nzBordered>
      <nz-list-item><span>名称</span>{{data.name}}</nz-list-item>
          <nz-list-item>
            <span>通道</span>
            <a [routerLink]="'/admin/tunnel/detail/'+data.tunnel_id">{{data.tunnel || data.tunnel_id}}</a>
          </nz-list-item>
      <nz-list-item><span>端口</span>{{data.port}}</nz-list-item>
      <nz-list-item><span>状态</span>{{data.running ? '启动' : '停止'}}</nz-list-item>
      <nz-list-item>
        <span>禁用</span>
        <nz-switch [ngModel]="data.disabled" (ngModelChange)="onEnableChange($event)"></nz-switch>
      </nz-list-item>
      <nz-list-item><span>创建时间</span>{{data.created|dateString}}</nz-list-item>
    </nz-list>

  </nz-tab>
  <nz-tab nzTitle="日志">
    <ng-template nz-tab>
      <app-event type="pipe" [id]="id"></app-event>
    </ng-template>
  </nz-tab>

</nz-tabset>

<ng-template #extraTemplate>
  <a (click)="load()" title="刷新">
    <i nz-icon nzType="reload" [nzSpin]="loading"></i>
  </a>
  <nz-divider nzType="vertical"></nz-divider>
  <a title="原始数据" appViewConfig [config]="data">
    <i nz-icon nzType="profile"></i>
  </a>
  <nz-divider nzType="vertical"></nz-divider>
  <a title="编辑" [routerLink]="'/admin/pipe/edit/'+id">
    <i nz-icon nzType="form"></i>
  </a>
</ng-template>
